<template>
    <!-- Single root element -->
    <view class="container">
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <div class="handle" @click="showServerPicker">
                    <view class="selected-tag">
                        {{ selectedServerText || '请选择您所在的区服' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 排位类型 -->
            <div class="form-item">
                <text class="label">排位类型</text>
                <div class="handle" @click="showRankTypePicker">
                    <view class="selected-tag">
                        {{ rankType || '请选择组排方式' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 陪练类型 -->
            <div class="form-item">
                <text class="label">陪练类型</text>
                <div class="handle" @click="showSparringTypePicker">
                    <view class="selected-tag">
                        {{ sparringType || '请选择陪练类型' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 当前段位 -->
            <div class="form-item" v-if="sparringType == '场次' || sparringType == '女神陪练'">
                <text class="label">当前段位</text>
                <div class="handle" @click="showCurrentTaskTypePicker">
                    <view class="selected-tag">
                        {{ selectedCurrentTask || '请选择角色当前的段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 时长选择 -->
            <div class="form-item" v-if="sparringType == '女神陪练'">
                <text class="label">时长选择</text>
                <div class="handle" @click="showDurationPicker">
                    <view class="selected-tag">
                        {{ duration || '请选择需要陪练的时长' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 场次选择 -->
            <div class="form-item" v-if="sparringType == '场次'">
                <text class="label">场次选择</text>
                <div class="handle" @click="showSessionPicker">
                    <view class="selected-tag">
                         {{ session || '请选择需要陪练的场次' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 上赛季段位 -->
            <div class="form-item" v-if="sparringType == '定位赛'">
                <text class="label">上赛季段位</text>
                <div class="handle" @click="showBeforeLevelPicker">
                    <view class="selected-tag">
                        {{ beforeLevel || '请选择上赛季段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 需打场次 -->
            <div class="form-item" v-if="sparringType == '定位赛'">
                <text class="label">需打场次</text>
                <div class="handle" @click="showNeedGamesPicker">
                    <view class="selected-tag">
                         {{ needGames || '请选择需打场次' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
        </div>

        <!-- Popups -->
        <!-- 游戏区服选择弹窗 -->
        <uni-popup ref="serverPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择游戏区服</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedGroupIndex !== null && serverTree[selectedGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                 <!-- Added Cancel button to server popup -->
                <view class="popup-footer" @click="hideServerPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 排位类型选择弹窗 -->
        <uni-popup ref="rankTypePopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择排位类型</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in rankTypeTree" :key="index" class="popup-item"
                        @click="selectRankTypeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideRankTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 陪练类型选择弹窗 -->
        <uni-popup ref="sparringTypePopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择陪练类型</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in sparringTypeTree" :key="index" class="popup-item"
                        @click="selectSparringTypeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideSparringTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 时长选择器弹窗 -->
        <uni-popup ref="durationPopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择陪练时长</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in durationTree" :key="index" class="popup-item"
                        @click="selectDurationItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideDurationPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 场次选择器弹窗 -->
        <uni-popup ref="sessionPopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择陪练场次</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in sessionTree" :key="index" class="popup-item"
                        @click="selectSessionItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideSessionPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 当前段位选择弹窗 -->
        <uni-popup ref="currentTaskTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择当前段位</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedCurrentTaskGroupIndex === groupIndex }"
                            @click="selectCurrentTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedCurrentTaskGroupIndex !== null && Task[selectedCurrentTaskGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in Task[selectedCurrentTaskGroupIndex].children" :key="itemIndex"
                                class="popup-item">
                                <div class="popup-item-title">{{ item.text }}</div>
                                <div class="popup-item-body">
                                    <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                        @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                        <span>{{ item2.text }}</span>
                                    </view>
                                </div>
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                 <!-- Added Cancel button -->
                <view class="popup-footer" @click="hideCurrentTaskTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 上赛季段位选择弹窗 -->
        <uni-popup ref="beforeLevelPopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择上赛季段位</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in beforeLevelTree" :key="index" class="popup-item"
                        @click="selectBeforeLevelItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideBeforeLevelPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 需打场次选择器弹窗 -->
        <uni-popup ref="needGamesPopup" type="bottom">
            <view class="popup-content">
                 <div class="top">请选择需打场次</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                        @click="selectNeedGamesItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideNeedGamesPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 订单信息区域 -->
        <div class="orderMsg">
            <div class="pay">
                <image src="../../static/icons/pay.png"></image>
                <div class="text">建议出价 <span class="price-highlight">{{ suggestedPrice }}元</span></div>
            </div>
            <div class="time">
                <image src="../../static/icons/time.png"></image>
                <div class="text">预计时限 <span class="time-highlight">{{ estimatedTime }}小时</span></div>
            </div>
        </div>

        <!-- Placeholder for footer -->
        <view class="footer-placeholder"></view>

        <!-- 底部按钮 -->
        <div class="footer">
            <div class="tip">代练通全程为您服务</div>
            <div class="button" @click="submitOrder">下一步</div>
        </div>
    </view>
</template>

<script>
// Removed Composition API imports: import { ref, onMounted } from "vue";
// No need for uni-app lifecycle imports here unless used

export default {
  // No components seem to be explicitly registered in the <script setup>
  components: {},
  data() {
    return {
      // Server Selection
      serverTree: [
        {
            text: '电信',
            value: "电信",
            children: [
                { text: '艾欧尼亚', value: "艾欧尼亚" },
                { text: '祖安', value: "祖安" },
                { text: '诺克萨斯', value: "诺克萨斯" },
                { text: '班德尔城', value: "班德尔城" },
                { text: '皮尔特沃夫', value: "皮尔特沃夫" },
                { text: '战争学院', value: "战争学院" },
                { text: '巨神峰', value: "巨神峰" },
                { text: '雷瑟守备', value: "雷瑟守备" },
                { text: '裁决之地', value: "裁决之地" },
                { text: '黑色玫瑰', value: "黑色玫瑰" },
                { text: '暗影岛', value: "暗影岛" },
                { text: '钢铁烈阳', value: "钢铁烈阳" },
                { text: '均衡教派', value: "均衡教派" },
                { text: '水晶之痕', value: "水晶之痕" },
                { text: '影流', value: "影流" },
                { text: '守望之海', value: "守望之海" },
                { text: '征服之海', value: "征服之海" },
                { text: '卡拉曼达', value: "卡拉曼达" },
                { text: '皮城警备', value: "皮城警备" },
            ]
        },
        {
            text: '网通',
            value: "网通",
            children: [
                { text: '比尔吉沃特', value: "比尔吉沃特" },
                { text: '德玛西亚', value: "德玛西亚" },
                { text: '弗雷尔卓德', value: "弗雷尔卓德" },
                { text: '无畏先锋', value: "无畏先锋" },
                { text: '恕瑞玛', value: "恕瑞玛" },
                { text: '扭曲丛林', value: "扭曲丛林" },
                { text: '巨龙之巢', value: "巨龙之巢" }
            ]
        },
        {
            text: '全网络',
            value: "全网络",
            children: [
                { text: '男爵领域', value: "男爵领域" },
                { text: '峡谷之巅', value: "峡谷之巅" }
            ]
        },
        {
            text: '其它',
            value: "其它",
            children: [
                { text: '教育网专区', value: "教育网专区" }
            ]
        },
      ],
      selectedServer: "艾欧尼亚",
      selectedGroupIndex: 0,

      // Rank Type Selection
      rankTypeTree: [
          { text: '单双排', value: "单双排" },
          { text: '灵活组排', value: "灵活组排" }
      ],
      rankType: "",

      // Sparring Type Selection
      sparringTypeTree: [
          { text: '场次', value: "场次" },
          { text: '定位赛', value: "定位赛" },
          { text: '女神陪练', value: "女神陪练" },
      ],
      sparringType: "场次",

      // Duration Selection (for 女神陪练)
      durationTree: [
          { text: '2小时', value: "2小时" }, { text: '3小时', value: "3小时" },
          { text: '4小时', value: "4小时" }, { text: '5小时', value: "5小时" },
          { text: '6小时', value: "6小时" }, { text: '7小时', value: "7小时" },
          { text: '8小时', value: "8小时" }, { text: '9小时', value: "9小时" },
          { text: '10小时', value: "10小时" }
      ],
      duration: "",

      // Session Selection (for 场次)
      sessionTree: [
          { text: '1场', value: "1场" }, { text: '2场', value: "2场" }, { text: '3场', value: "3场" },
          { text: '4场', value: "4场" }, { text: '5场', value: "5场" }, { text: '6场', value: "6场" },
          { text: '7场', value: "7场" }, { text: '8场', value: "8场" }, { text: '9场', value: "9场" },
          { text: '10场', value: "10场" }
      ],
      session: "",

      // Task/Rank Selection
      Task: [], // This will be populated in mounted()
      selectedCurrentTask: "",
      selectedCurrentTaskGroupIndex: 0,

      // Before Level Selection (for 定位赛)
      beforeLevelTree: [
          { text: '新号', value: "新号" }, { text: '黑铁', value: "黑铁" }, { text: '青铜', value: "青铜" },
          { text: '白银', value: "白银" }, { text: '黄金', value: "黄金" }, { text: '铂金', value: "铂金" },
          { text: '翡翠', value: "翡翠" }, { text: '钻石', value: "钻石" }, { text: '大师', value: "大师" },
      ],
      beforeLevel: "",

      // Need Games Selection (for 定位赛)
      needGamesTree: [
          { text: '1场', value: "1场" }, { text: '2场', value: "2场" }, { text: '3场', value: "3场" },
          { text: '4场', value: "4场" }, { text: '5场', value: "5场" }, { text: '6场', value: "6场" },
          { text: '7场', value: "7场" }, { text: '8场', value: "8场" }, { text: '9场', value: "9场" },
          { text: '10场', value: "10场" }
      ],
      needGames: "",

      // Form Data to be submitted
    //   formData: { // This structure seemed redundant as properties are directly used
    //     server: '',
    //     currentTask: '',
    //     needGames: '',
    //     beforeLevel: '',
    //     rankType: '',
    //     sparringType: '',
    //     session: '',
    //     duration: '',
    //   },

        // Price/Time display (using computed properties potentially)
        suggestedPrice: 87, // Example static value
        estimatedTime: 47, // Example static value
    };
  },
  computed: {
      selectedServerText() {
          if (this.serverTree && this.serverTree[this.selectedGroupIndex]) {
              return `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`;
          }
          return '请选择您所在的区服';
      }
      // Add computed properties for price/time if they depend on selections
      // computedPrice() { ... }
      // computedTime() { ... }
  },
  mounted() {
    // Call the method to populate the Task list when the component is mounted
    this.createTaskList();
  },
  methods: {
    // Server Popup Methods
    showServerPicker() {
      if (this.$refs.serverPopup) {
        this.$refs.serverPopup.open();
      } else {
        console.error("serverPopup ref not ready");
      }
    },
    hideServerPicker() {
      if (this.$refs.serverPopup) {
        this.$refs.serverPopup.close();
      }
    },
    selectGroup(index) {
      this.selectedGroupIndex = index;
    },
    selectServerItem(item) {
      this.selectedServer = item.text;
      this.hideServerPicker();
    },

    // Rank Type Popup Methods
    showRankTypePicker() {
      if (this.$refs.rankTypePopup) {
        this.$refs.rankTypePopup.open();
      } else {
        console.error("rankTypePopup ref not ready");
      }
    },
    hideRankTypePicker() {
      if (this.$refs.rankTypePopup) {
        this.$refs.rankTypePopup.close();
      }
    },
    selectRankTypeItem(item) {
      this.rankType = item.text;
      this.hideRankTypePicker();
    },

    // Sparring Type Popup Methods
    showSparringTypePicker() {
      if (this.$refs.sparringTypePopup) {
        this.$refs.sparringTypePopup.open();
      } else {
        console.error("sparringTypePopup ref not ready");
      }
    },
    hideSparringTypePicker() {
      if (this.$refs.sparringTypePopup) {
        this.$refs.sparringTypePopup.close();
      }
    },
    selectSparringTypeItem(item) {
      this.sparringType = item.text;
      // Reset conditional fields when type changes
      this.selectedCurrentTask = '';
      this.duration = '';
      this.session = '';
      this.beforeLevel = '';
      this.needGames = '';
      this.hideSparringTypePicker();
    },

    // Duration Popup Methods (for 女神陪练)
    showDurationPicker() {
      if (this.$refs.durationPopup) {
        this.$refs.durationPopup.open();
      } else {
        console.error("durationPopup ref not ready");
      }
    },
    hideDurationPicker() {
      if (this.$refs.durationPopup) {
        this.$refs.durationPopup.close();
      }
    },
    selectDurationItem(item) {
      this.duration = item.text;
      this.hideDurationPicker();
    },

    // Session Popup Methods (for 场次)
    showSessionPicker() {
      if (this.$refs.sessionPopup) {
        this.$refs.sessionPopup.open();
      } else {
        console.error("sessionPopup ref not ready");
      }
    },
    hideSessionPicker() {
      if (this.$refs.sessionPopup) {
        this.$refs.sessionPopup.close();
      }
    },
    selectSessionItem(item) {
      this.session = item.text;
      this.hideSessionPicker();
    },

    // Task List Creation
    createTaskList() {
        const tiers = ['黑铁', '青铜', '白银', '黄金', '铂金', '翡翠', '钻石', '大师'];
        const taskList = [];
        tiers.forEach(tier => {
            let tierItem = { text: tier, value: tier, children: [] };
            let subTierItem = { text: `${tier}`, value: `${tier}`, children: [] };
            // Rank sub-levels are 1-4 (or similar), not 0-4. Adjusting logic.
            const stars = Array.from({ length: 4 }, (_, index) => ({ text: `${index + 1}`, value: `${index + 1}` })); // Assuming ranks 1-4
            subTierItem.children = stars;
            tierItem.children.push(subTierItem);
            taskList.push(tierItem);
        });
        this.Task = taskList;
    },

    // Current Task Popup Methods
    showCurrentTaskTypePicker() {
      if (this.$refs.currentTaskTypePopup) {
        this.$refs.currentTaskTypePopup.open();
      } else {
        console.error("currentTaskTypePopup ref not ready");
      }
    },
    hideCurrentTaskTypePicker() {
      if (this.$refs.currentTaskTypePopup) {
        this.$refs.currentTaskTypePopup.close();
      }
    },
    selectCurrentTaskGroup(index) {
      this.selectedCurrentTaskGroupIndex = index;
    },
    selectCurrentTaskItem(text1, text2) {
      this.selectedCurrentTask = `${text1} ${text2}`;
      this.hideCurrentTaskTypePicker();
    },

    // Before Level Popup Methods (for 定位赛)
    showBeforeLevelPicker() {
      if (this.$refs.beforeLevelPopup) {
        this.$refs.beforeLevelPopup.open();
      } else {
        console.error("beforeLevelPopup ref not ready");
      }
    },
    hideBeforeLevelPicker() {
      if (this.$refs.beforeLevelPopup) {
        this.$refs.beforeLevelPopup.close();
      }
    },
    selectBeforeLevelItem(item) {
      this.beforeLevel = item.text;
      this.hideBeforeLevelPicker();
    },

    // Need Games Popup Methods (for 定位赛)
    showNeedGamesPicker() {
      if (this.$refs.needGamesPopup) {
        this.$refs.needGamesPopup.open();
      } else {
        console.error("needGamesPopup ref not ready");
      }
    },
    hideNeedGamesPicker() {
      if (this.$refs.needGamesPopup) {
        this.$refs.needGamesPopup.close();
      }
    },
    selectNeedGamesItem(item) {
      this.needGames = item.text;
      this.hideNeedGamesPicker();
    },

    // Form Validation (Basic example)
    validateForm() {
        if (!this.selectedServer) {
            uni.showToast({ title: '请选择游戏区服', icon: 'none' });
            return false;
        }
        if (!this.rankType) {
             uni.showToast({ title: '请选择排位类型', icon: 'none' });
            return false;
        }
        if (!this.sparringType) {
             uni.showToast({ title: '请选择陪练类型', icon: 'none' });
            return false;
        }
        // Add validation based on sparringType
        if (this.sparringType === '场次' && !this.session) {
             uni.showToast({ title: '请选择陪练场次', icon: 'none' });
            return false;
        }
        if (this.sparringType === '场次' && !this.selectedCurrentTask) {
             uni.showToast({ title: '请选择当前段位', icon: 'none' });
            return false;
        }
         if (this.sparringType === '女神陪练' && !this.duration) {
             uni.showToast({ title: '请选择陪练时长', icon: 'none' });
            return false;
        }
         if (this.sparringType === '女神陪练' && !this.selectedCurrentTask) {
             uni.showToast({ title: '请选择当前段位', icon: 'none' });
            return false;
        }
         if (this.sparringType === '定位赛' && !this.beforeLevel) {
             uni.showToast({ title: '请选择上赛季段位', icon: 'none' });
            return false;
        }
        if (this.sparringType === '定位赛' && !this.needGames) {
             uni.showToast({ title: '请选择需打场次', icon: 'none' });
            return false;
        }
        return true;
    },

    // Submit Order
    submitOrder() {
      if (!this.validateForm()) {
        return;
      }

      // Construct the formData object to pass to the next page
      const orderData = {
        server: this.selectedServerText, // Use computed property for full server name
        rankType: this.rankType,
        sparringType: this.sparringType,
        // Conditionally add fields based on sparringType
        ...(this.sparringType === '场次' && { session: this.session, currentTask: this.selectedCurrentTask }),
        ...(this.sparringType === '女神陪练' && { duration: this.duration, currentTask: this.selectedCurrentTask }),
        ...(this.sparringType === '定位赛' && { beforeLevel: this.beforeLevel, needGames: this.needGames }),
         // Add calculated price and time if available
        suggestedPrice: this.suggestedPrice,
        estimatedTime: this.estimatedTime,
      };

      console.log("准备提交的订单数据:", orderData);

      // Navigate to the next page (SubmitOrder PL)
      uni.navigateTo({
        // Ensure the path is correct
        url: `/pages/SubmitOrder/PL/YXLMsubmitOrder/index?formData=${encodeURIComponent(JSON.stringify(orderData))}`
      });
    }
  }
}
</script>

<style>
/* 表单样式 */
.container { /* Added container */
    padding-bottom: 180rpx; /* Add padding for fixed footer */
}
.form {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.form-item {
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0; /* Add separator */
    padding-bottom: 30rpx;
}
.form-item:last-child {
    border-bottom: none;
}

.form-item .label {
    width: 30%;
    height: 100%;
    display: block;
    font-size: 28rpx;
    color: #333; /* Darker label */
}

.form-item .handle {
    width: 70%;
    cursor: pointer; /* Indicate clickable */
}

.picker,
.input {
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10rpx; /* Adjust padding */
    height: 50rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag image {
    padding-left: 15rpx; /* Adjust spacing */
    width: 24rpx;
    height: 24rpx;
}

/* ... Input group, picker styles - keep if needed, else remove ... */

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}


.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Adjust size */
    font-weight: bold;
    padding: 30rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #eee;
}

.popup-content .body {
    /* min-height: 1000rpx; */ /* Maybe remove fixed height */
    max-height: 70vh; /* Limit max height */
    display: flex;
}

.popup-nav {
    width: 200rpx;
    border-right: 1px solid #eee;
    /* padding: 20rpx 0; */
    background-color: #f8f8f8;
     height: 70vh; /* Match body max height */
}

.nav-item {
    padding: 25rpx 20rpx; /* Adjust padding */
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border-bottom: 1rpx solid #eee;
}
.nav-item:last-child {
    border-bottom: none;
}

.nav-item.active {
    color: #1ba035;
    font-weight: bold;
    background-color: #fff;
    /* border-left: 4rpx solid #1ba035; */
    /* padding-left: 16rpx; */
}

.popup-scroll {
    flex: 1;
    height: 70vh; /* Match body max height */
}

.popup-group-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    padding: 15rpx 20rpx; /* Adjust padding */
    border-bottom: 1px solid #eee;
    background-color: #f8f8f8;
}

.popup-item {
    padding: 25rpx 40rpx; /* Adjust padding */
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}
.popup-item:active {
    background-color: #e0e0e0;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 16px;
    font-weight: bold; /* Bolder title */
    padding: 15rpx 0 10rpx; /* Adjust padding */
    text-align: center;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 10rpx;
}

.popup-item-body {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx 20rpx; /* Adjust padding */
    justify-content: center; /* Center items */
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100rpx; /* Minimum width */
    padding: 15rpx 25rpx; /* Adjust padding */
    border: 1px solid #ccc; /* Lighter border */
    border-radius: 8rpx;
    box-sizing: border-box;
    margin: 10rpx;
    font-size: 26rpx;
    cursor: pointer;
}
.popup-item-body .popup-item-body-item:active {
     background-color: #e0e0e0;
     border-color: #bbb;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28rpx;
    color: #999;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 30rpx; /* Larger font */
    padding: 25rpx;
    color: #666; /* Standard cancel color */
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer:active {
    background-color: #f0f0f0;
}

/* Remove popup-footer2 if not used */

.orderMsg {
    width: 100%;
    display: flex;
    padding: 30rpx 40rpx; /* Adjust padding */
    box-sizing: border-box;
    background-color: #f8f8f8; /* Light background */
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    /* flex-direction: column; */ /* Side by side */
    align-items: center;
    justify-content: center;
}

.orderMsg .pay image,
.orderMsg .time image {
    width: 40rpx; /* Smaller icon */
    height: 40rpx;
    margin-right: 15rpx; /* Space between icon and text */
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 26rpx; /* Adjust size */
    font-weight: normal; /* Normal weight */
    color: #666;
}
.price-highlight,
.time-highlight {
    color: red;
    font-weight: bold;
    margin-left: 5rpx;
}

.footer-placeholder {
    height: 180rpx; /* Match footer height + tip */
}

.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff; /* White background */
    z-index: 10;
    border-top: 1rpx solid #e0e0e0;
}

.footer .tip {
    width: 100%;
    font-size: 24rpx; /* Smaller tip */
    color: #999; /* Grey tip */
    background-color: #f8f8f8;
    padding: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.footer .button {
    width: 100%;
    height: 100rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007aff; /* Primary button color */
    font-size: 32rpx;
    font-weight: bold;
    cursor: pointer;
}
.footer .button:active {
     background-color: #0056b3; /* Darker shade on press */
}
</style>